<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <base th:href="${#request.getContextPath()+'/'}">
    <link href="css/H-ui.min.css" rel="stylesheet" type="text/css" />
    <link href="css/H-ui.admin.css" rel="stylesheet" type="text/css" />
    <link href="lib/icheck/icheck.css" rel="stylesheet" type="text/css" />
    <link href="lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="webupload/webuploader.css">
    <link rel="stylesheet" type="text/css" href="webupload/style.css">


    <title>Title</title>
</head>
<body>
<div class="pd-20">
    <form action="" method="post" class="form form-horizontal" id="form-goods-add">
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>商品名称：</label>
            <div class="formControls col-5">
                <input type="text" class="input-text" value=" 荣耀20S 李现同款" placeholder=""  id="user-name" name="gname" datatype="*" nullmsg="用户名不能为空">
            </div>
            <div class="col-4"> </div>
        </div>

        <div class="row cl">
            <label class="form-label col-3">商品类型：</label>
            <div class="formControls col-5"> <span class="select-box" style="width:150px;">
				<select class="select" name="gtype" size="1">
					<option value="0">电器类</option>
					<option value="1">数码类</option>
					<option value="2">食品类</option>
					<option value="3">酒类</option>
				</select>
				</span> </div>
        </div>
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>商品价格：</label>
            <div class="formControls col-5">
                <input type="text" class="input-text" value="1899.00"  name="gprice" id="email" datatype="*" nullmsg="请输入邮箱！">
            </div>
            <div class="col-4"> </div>
        </div>

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>商品库存：</label>
            <div class="formControls col-5">
                <input type="text" class="input-text" value="100" name="gstock" id="email" datatype="n" nullmsg="请输入邮箱！">
            </div>
            <div class="col-4"> </div>
        </div>

        <div class="row cl">
            <label class="form-label col-3">商品描述：</label>
            <div class="formControls col-5">
                <textarea name="gdesc" cols="" rows="" class="textarea"  placeholder="说点什么...100个字符以内" dragonfly="true" onKeyUp="textarealength(this,100)">3200万人像超级夜景 4800万超广角AI三摄 麒麟810旗舰级芯片 全网通版6GB+128GB 蝶羽蓝</textarea>
                <p class="textarea-numberbar"><em class="textarea-length">0</em>/100</p>
            </div>
            <div class="col-4"> </div>
        </div>

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>商品图片：</label>
            <input type="hidden" name="gpic" id="gpic">
            <div id="uploader-demo">
                <!--用来存放item-->
                <div id="filePicker">选择图片</div>
                <div id="fileList" class="uploader-list"></div>
            </div>
        </div>

        <div class="row cl">
            <div class="col-9 col-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/icheck/jquery.icheck.min.js"></script>
<script type="text/javascript" src="lib/Validform/5.3.2/Validform.min.js"></script>
<script type="text/javascript" src="lib/layer/1.9.3/layer.js"></script>
<script type="text/javascript" src="js/H-ui.js"></script>
<script type="text/javascript" src="js/H-ui.admin.js"></script>
<script type="text/javascript" src="js/form_utils.js"></script>
<script type="text/javascript" src="webupload/webuploader.min.js"></script>
<script type="text/javascript">
    $(function(){
        // 初始化Web Uploader
        var uploader = WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: true,
            // 文件接收服务端url
            server: 'goods/uploadFile',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#filePicker',
            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
        // 当有文件添加进来的时候
        uploader.on( 'fileQueued', function( file ) {
            var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '<div class="info">' + file.name + '</div>' +
                '</div>'
                ),
                $img = $li.find('img');
            // $list为容器jQuery实例
            var $list = $("#fileList");
            $list.append( $li );
            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            // thumbnailWidth x thumbnailHeight 为 100 x 100
            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }
                $img.attr( 'src', src );
            }, 100, 100);
        });
        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on( 'uploadSuccess', function(file,resp) {
            // 1.先获取有异步请求返回过来的绝对路径
            var filePath = resp._raw;
            // 2.写到表单里面
            // 2.1 先获取之前图片路径
            var path = $("#gpic").val();
            if(path){
                path+="|";
            }
            path += filePath;
            $("#gpic").val(path);
            $( '#'+file.id ).addClass('upload-state-done');
        });

        $("#form-goods-add").Validform({
            tiptype:2,
            callback:function(form){
                submit("goods/addGoods",form);
                return false;
            }
        });
    });
</script>
</body>
</html>